<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .red_con-outer {

      position: absolute;
      left: 0;
      top: -147px;
      width: 100vw;
      height: calc(100vh + 147px);
      
      overflow: hidden;
    }
    .red_con {
      position: absolute;
      left: 0;
      top: 0px;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
    .red_p {
      position: absolute;
      bottom: 100vh;
    }

    .dropAni {
      animation: drop 4s linear ;
    }

    @keyframes drop {
      0% {
        bottom: 100vh;
      }

      100% {
        bottom: -147px;
      }
    }

    .red_con-point {
      position: absolute;
      bottom: 50px;
      left: 50%;
      transform: translate(-50%, 0);
    }
  </style>
</head>
<body>
  <!-- <div class="red_con-outer"> -->
    <div class="red_con">
      
    </div>
  <!-- </div>> -->


  <div class="red_con-point">
    你的得分 <div class="point"></div> 
  </div>

  <script src="../utils/index.js"></script>

  <script>
      // 1.获取img对象  设置属性
      // 2.把img对象定时 加入到页面中
      // 3.每隔一段时间 清除不可见的img对象

      let point = 0
      let container = document.querySelector(".red_con")
      let pointDom = document.querySelector(".point")
      let observer
      // let count = 1
      function imgLoad(src) {
        return new Promise((resolve, reject) => {
          let img = new Image()
          img.src = src
          img.onload = function(){
            resolve(img)
          }

          img.onerror = function () {
            resolve(false)
          }
        })
      }

      function generateImg(img, offset){
        img.classList.add("red_p")
        img.classList.add("dropAni")
        img.style.left =  offset + '%'
        return img
      } 

      function removeRedPocket(event) {
        let dom = event.currentTarget
        let fatherDom = dom.parentNode
        pointDom.textContent = ++point
        fatherDom && fatherDom.removeChild(dom)
      }

      async function init() {
        let res = await imgLoad('https://www.baidu.com/img/flexible/logo/pc/result@2.png')

        if (!res) return 

        // 算出图片与屏幕的百分比
        let imgWidth = res.width
        let screenWidth = document.body.clientWidth
        let percent = 1 - imgWidth / screenWidth
        
        // observer 的回调函数
        // function observerFunc(observerArr) {
          
        //   observerArr.forEach(item => {
        //     if (item.intersectionRatio <= 0) {
        //       container.removeChild(item.target)
        //       observer.unobserve(item.target)
        //     }
        //   })
        // }

        // observer = new IntersectionObserver(observerFunc, {
        //   root: document.querySelector('.red_con'),
        //   rootMargin: "147px 0px 0px 0px"
        // })

        setInterval(function() {
          let resClone = res.cloneNode()
          resClone.addEventListener('click', removeRedPocket)
          let img = generateImg(resClone, (Math.random() * percent).toFixed(2) * 100)
          container.appendChild(img)
          // observer.observe(img)
          // count++
          // if (count > 9) debugger
        }, 1000)

      }

      init()

  </script>
</body>
</html>